<!-- 地址库管理 -->
<template>
<div class="content-box">
    <div style="display:flex;height: calc(100% - 60px);">
        <div style="position: relative;" :style="{width:level_1_width+'px'}">
            <div class="headerBox">
                <span class="operateBtnGroup" style="flex:1;overflow:hidden;min-width:80px;height: 28px;">
                    <span
                        class="operateBtnItem"
                        v-for="(item, index) in ButtonArr"
                        :key="index"
                        @click="pushButton_level_1(item.route)"
                    >
                        <span v-if="index !== 0" class="shu"></span>
                        <img
                        :src="$baseUrl + item.image"
                        />
                        <span class="text">{{ item.m_name }}</span>
                    </span>
                    <el-dropdown v-if="isMore_right1" style="width: 80px;position: absolute;cursor: pointer;height: 28px;line-height: 29px;margin:0 10px;" @command="pushButton_level_1" trigger="click">
                        <span class="el-dropdown-link">
                        {{$t('PaginationLang.more_operations')}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :style="{marginTop:index==0?'0':'5px',padding:'0 10px'}" style="display:flex;align-items: center;gap: 5px;" v-for="(item, index) in ButtonArrHide1" :key="index" :command="item.route">
                            <img :src="$baseUrl + item.image" alt="" />
                            <span>{{ item.m_name }}</span>
                        </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <div class="buttonGroup">
                    <span @click="getTableData_level_1"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.refresh')}}</span>
                </div>
            </div>
            <MyTable
            :tableColumn="tableColumn_level_1"
            :tableData="tableData_level_1"
            :isOrder="false"
            @sendCurrentData="setCurrent_level_1"
            >
                <template v-slot:content="scope">
                    <span>{{ scope.row[scope.config.prop] }}</span>
                </template>
            </MyTable>
        </div>
        <div :style="{width:SeekBar_width+'px'}" class="SeekBar"  @mousedown="sum_block_ON_left"></div>
        <div :style="{width:level_2_width>0?level_2_width+'px':'unset',flex:level_2_width>0?'unset':1}">
            <div class="headerBox">
                <span class="operateBtnGroup" style="flex:1;overflow:hidden;min-width:80px;height: 28px;">
                    <span
                        class="operateBtnItem"
                        v-for="(item, index) in ButtonArr"
                        :key="index"
                        @click="pushButton_level_2(item.route)"
                    >
                        <span v-if="index !== 0" class="shu"></span>
                        <img
                        :src="$baseUrl + item.image"
                        />
                        <span class="text">{{ item.m_name }}</span>
                    </span>
                    <el-dropdown v-if="isMore_right2" style="width: 80px;position: absolute;cursor: pointer;height: 28px;line-height: 29px;margin:0 10px;" @command="pushButton_level_2" trigger="click">
                        <span class="el-dropdown-link">
                        {{$t('PaginationLang.more_operations')}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :style="{marginTop:index==0?'0':'5px',padding:'0 10px'}" style="display:flex;align-items: center;gap: 5px;" v-for="(item, index) in ButtonArrHide2" :key="index" :command="item.route">
                            <img :src="$baseUrl + item.image" alt="" />
                            <span>{{ item.m_name }}</span>
                        </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <div class="buttonGroup">
                    <span @click="getTableData_level_2"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.refresh')}}</span>
                </div>
            </div>
            <MyTable
            :tableColumn="tableColumn_level_2"
            :tableData="tableData_level_2"
            :isOrder="false"
            @sendCurrentData="setCurrent_level_2"
            >
                <template v-slot:content="scope">
                    <span>{{ scope.row[scope.config.prop] }}</span>
                </template>
            </MyTable>
        </div>
        <div :style="{width:SeekBar_width+'px'}" class="SeekBar"  @mousedown="sum_block_ON_right"></div>
        <div :style="{width:level_3_width+'px'}">
            <div class="headerBox">
                <span class="operateBtnGroup" style="flex:1;overflow:hidden;min-width:80px;height: 28px;">
                    <span
                        class="operateBtnItem"
                        v-for="(item, index) in ButtonArr"
                        :key="index"
                        @click="pushButton_level_3(item.route)"
                    >
                        <span v-if="index !== 0" class="shu"></span>
                        <img
                        :src="$baseUrl + item.image"
                        />
                        <span class="text">{{ item.m_name }}</span>
                    </span>
                    <el-dropdown v-if="isMore_right3" style="width: 80px;position: absolute;cursor: pointer;height: 28px;line-height: 29px;margin:0 10px;" @command="pushButton_level_3" trigger="click">
                        <span class="el-dropdown-link">
                        {{$t('PaginationLang.more_operations')}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :style="{marginTop:index==0?'0':'5px',padding:'0 10px'}" style="display:flex;align-items: center;gap: 5px;" v-for="(item, index) in ButtonArrHide3" :key="index" :command="item.route">
                            <img :src="$baseUrl + item.image" alt="" />
                            <span>{{ item.m_name }}</span>
                        </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
                <div class="buttonGroup">
                    <span @click="getTableData_level_3"><i class="icon_style el-icon-refresh"></i>{{$t('FilterBoxLang.refresh')}}</span>
                </div>
            </div>
            <MyTable
            :tableColumn="tableColumn_level_3"
            :tableData="tableData_level_3"
            :isOrder="false"
            @sendCurrentData="setCurrent_level_3"
            >
                <template v-slot:content="scope">
                    <span>{{ scope.row[scope.config.prop] }}</span>
                </template>
            </MyTable>
        </div>
    </div>

  <Add
    @success="successData"
    ref="add"
  ></Add>
  <Edit
    @success="successData"
    ref="edit"
  ></Edit>
</div>
</template>

<script>
import Add from "./AddressLibrary_add";
import Edit from "./AddressLibrary_edit";
export default {
  components: {
    Add,
    Edit,
  },
  data(){
    return{
        tableColumn_level_1: [
            {
            label: "",
            prop: "table_code",
            width:40,
            },
            {
            checked: true,
            label: this.$t('AddressLibraryLang.level_1'),
            prop: "name",
            order:"",
            },
            {
            checked: true,
            label: this.$t('AddressLibraryLang.country_code'),
            prop: "code",
            order:"",
            width:80,
            },
        ],
        tableData_level_1:[],
        sendDataObj_level_1:{},
        tableColumn_level_2: [
            {
            label: "",
            prop: "table_code",
            width:40,
            },
            {
            checked: true,
            label: this.$t('AddressLibraryLang.level_2'),
            prop: "name",
            order:"",
            },
        ],
        tableData_level_2:[],
        sendDataObj_level_2:{},
        tableColumn_level_3: [
            {
            label: "",
            prop: "table_code",
            width:40,
            },
            {
            checked: true,
            label: this.$t('AddressLibraryLang.level_3'),
            prop: "name",
            order:"",
            },
        ],
        tableData_level_3:[],
        sendDataObj_level_3:{},
        leftWidthParent:220,//左侧菜单宽度
        level_1_width:400,//默认宽度
        level_2_width:0,//默认宽度
        level_3_width:400,//默认宽度
        level_min_width:300,//数据组最小宽度
        SeekBar_width:4,//拖动条宽度

        ButtonArr: [],// 按钮集合
        ButtonArrHide1: [],// 隐藏按钮集合
        ButtonArrHide2: [],// 隐藏按钮集合
        ButtonArrHide3: [],// 隐藏按钮集合
        isMore_right1:false,//是否显示更多按钮
        isMore_right2:false,//是否显示更多按钮
        isMore_right3:false,//是否显示更多按钮
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    if(!!document.getElementById('LeftMenu')){
        this.leftWidthParent=document.getElementById('LeftMenu').offsetWidth+20
        this.setWidth()
    }else{
        setTimeout(() => {
            this.leftWidthParent=document.getElementById('LeftMenu').offsetWidth+20
            this.setWidth()
        }, 500);
    }
    window.addEventListener('resize', this.setWidth);
    window.addEventListener('mouseup', this.sum_block_NO)
    this.getTableData_level_1()

    this.getButtonArr()
  },
  methods:{
    setWidth(){
        let windowWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if(windowWidth>1300){
            document.getElementById('ContentArea').style.minWidth="unset"
            this.level_1_width=300,//默认宽度
            this.level_2_width=300,//默认宽度
            this.level_3_width = windowWidth-this.leftWidthParent-this.SeekBar_width*2 - this.level_1_width-this.level_2_width
        }else{
            document.getElementById('ContentArea').style.minWidth="1000px"
            this.level_1_width=300,//默认宽度
            this.level_2_width=300,//默认宽度
            this.level_3_width=400
        }
    },
    sum_block_ok_left(e) {
        let windowWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if(e.clientX<this.level_min_width+this.leftWidthParent){
            this.level_1_width=this.level_min_width
        }else if(e.clientX>windowWidth-this.level_min_width-this.level_3_width){
            this.level_1_width=windowWidth-this.level_min_width-this.level_3_width - this.leftWidthParent-this.SeekBar_width*2
        }else{
            this.level_1_width =e.clientX -this.leftWidthParent
        }
        this.level_2_width = windowWidth-this.leftWidthParent-this.SeekBar_width*2 - this.level_1_width-this.level_3_width
        this.setButtonArr()
    },
    sum_block_ok_right(e) {
        let windowWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        if(e.clientX<this.leftWidthParent+this.level_1_width+this.level_min_width){
            this.level_3_width=windowWidth-this.leftWidthParent-this.level_1_width-this.level_min_width-this.SeekBar_width*2
        }else if(e.clientX>windowWidth-this.level_min_width){
            this.level_3_width=this.level_min_width
        }else{
            this.level_3_width =windowWidth-e.clientX-this.SeekBar_width*2
        }
        this.level_2_width = windowWidth-this.leftWidthParent-this.SeekBar_width*2 - this.level_1_width-this.level_3_width
        this.setButtonArr()
    },
    sum_block_ON_left(e) {
        window.addEventListener('mousemove', this.sum_block_ok_left)
        document.body.style.userSelect='none'//禁止选中文字
    },
    sum_block_ON_right(e) {
        window.addEventListener('mousemove', this.sum_block_ok_right)
        document.body.style.userSelect='none'//禁止选中文字
    },
    sum_block_NO() {
        window.removeEventListener('mousemove', this.sum_block_ok_left)
        window.removeEventListener('mousemove', this.sum_block_ok_right)
        document.body.style.userSelect='unset'//取消禁止选中文字
    },
    pushButton_level_1(route) {
        if (route == "add") {
            this.$refs.add.init('level_1',-1);
        } else if (route == "edit") {
            if (JSON.stringify(this.sendDataObj_level_1) == "{}" || this.sendDataObj_level_1 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            } else {
            this.$refs.edit.init('level_1',this.sendDataObj_level_1);
            }
        } else if (route == "look") {
            if (JSON.stringify(this.sendDataObj_level_1) == "{}" || this.sendDataObj_level_1 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            } else {
            this.$refs.edit.init('level_1',this.sendDataObj_level_1,'look');
            }
        }
    },
    pushButton_level_2(route) {
        if (JSON.stringify(this.sendDataObj_level_1) == "{}" || this.sendDataObj_level_1 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            return
        }
        if (route == "add") {
            this.$refs.add.init('level_2',this.sendDataObj_level_1.id);
        } else if (route == "edit") {
            this.$refs.edit.init('level_2',this.sendDataObj_level_2);
        } else if (route == "look") {
            this.$refs.edit.init('level_2',this.sendDataObj_level_2,'look');
        }
    },
    pushButton_level_3(route) {
        if (JSON.stringify(this.sendDataObj_level_2) == "{}" || this.sendDataObj_level_2 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            return
        }
        if (route == "add") {
            this.$refs.add.init('level_3',this.sendDataObj_level_2.id);
        } else if (route == "edit") {
            this.$refs.edit.init('level_3',this.sendDataObj_level_3);
        } else if (route == "look") {
            this.$refs.edit.init('level_3',this.sendDataObj_level_3,'look');
        }
    },
    successData(type){
        if(type=='level_1'){
            this.getTableData_level_1()
        }else if(type=='level_2'){
            this.getTableData_level_2()
        }else if(type=='level_3'){
            this.getTableData_level_3()
        }
    },
    // 获取表格level_1数据
    getTableData_level_1(){
      this.$get("addressLibraryList", {parent_id:-1}).then((res) => {
        this.tableData_level_1 = res.data;
        this.sendDataObj_level_1={}
        this.tableData_level_2 = [];
        this.sendDataObj_level_2={}
        this.tableData_level_3 = [];
        this.sendDataObj_level_3={}
      });
    },
    // 获取表格level_2数据
    getTableData_level_2(){
        if (JSON.stringify(this.sendDataObj_level_1) == "{}" || this.sendDataObj_level_1 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            return
        }
        this.$get("addressLibraryList", {parent_id:this.sendDataObj_level_1.id}).then((res) => {
            this.tableData_level_2 = res.data;
            this.sendDataObj_level_2={}
            this.tableData_level_3 = [];
            this.sendDataObj_level_3={}
        });
    },
    // 获取表格level_3数据
    getTableData_level_3(){
        if (JSON.stringify(this.sendDataObj_level_2) == "{}" || this.sendDataObj_level_2 == null) {
            this.$message.warning(this.$t('common.message_warn_text'));
            return
        }
      this.$get("addressLibraryList", {parent_id:this.sendDataObj_level_2.id}).then((res) => {
        this.tableData_level_3 = res.data;
        this.sendDataObj_level_3={}
      });
    },
    setCurrent_level_1(data){
      this.sendDataObj_level_1=data
      this.getTableData_level_2()
    },
    setCurrent_level_2(data){
      this.sendDataObj_level_2=data
      this.getTableData_level_3()
    },
    setCurrent_level_3(data){
      this.sendDataObj_level_3=data
    },


    //获取按钮组
    getButtonArr() {
        this.$get("menuson", { p_id: this.tabsId }).then((res) => {
            if(res.success&&!!res.menu_position2){
                this.ButtonArr = [];
                this.ButtonArr.push(...res.menu_position2.menu_down)
                // this.ButtonArr.sort((a, b) => a.sort - b.sort)
                this.$nextTick(()=>{
                    this.setButtonArr()
                })
            }
        });
    },
    setButtonArr(){
        let btnDomArr=document.getElementsByClassName('operateBtnGroup')
        if(btnDomArr.length<2){
            return
        }
        let btnDom1=btnDomArr[0]
        let boxWidth1=btnDom1.clientWidth
        let boxArr1=btnDom1.children
        let index1=0
        for (let i = 0; i < boxArr1.length; i++) {
            let elWidth1=this.getElementWidth(boxArr1[i])
            boxWidth1-=elWidth1
            if(i>0&&boxWidth1<10){
                index1=i
                btnDom1.style.paddingRight='50px'
                this.isMore_right1=true
                break
            }else{
                btnDom1.style.paddingRight=0
                this.isMore_right1=false
            }
        }
        this.ButtonArrHide1=this.ButtonArr.slice(index1)
        if(this.ButtonArrHide1.length==0){
            btnDom1.style.paddingRight=0
            this.isMore_right1=false
        }
        
        let btnDom2=btnDomArr[1]
        let boxWidth2=btnDom2.clientWidth
        let boxArr2=btnDom2.children
        let index2=0
        for (let i = 0; i < boxArr2.length; i++) {
            let elWidth2=this.getElementWidth(boxArr2[i])
            boxWidth2-=elWidth2
            if(i>0&&boxWidth2<10){
                index2=i
                btnDom2.style.paddingRight='50px'
                this.isMore_right2=true
                break
            }else{
                btnDom2.style.paddingRight=0
                this.isMore_right2=false
            }
        }
        this.ButtonArrHide2=this.ButtonArr.slice(index2)
        if(this.ButtonArrHide2.length==0){
            btnDom2.style.paddingRight=0
            this.isMore_right2=false
        }

        let btnDom3=btnDomArr[2]
        let boxWidth3=btnDom3.clientWidth
        let boxArr3=btnDom3.children
        let index3=0
        for (let i = 0; i < boxArr3.length; i++) {
            let elWidth3=this.getElementWidth(boxArr3[i])
            boxWidth3-=elWidth3
            if(i>0&&boxWidth3<10){
                index3=i
                btnDom3.style.paddingRight='50px'
                this.isMore_right3=true
                break
            }else{
                btnDom3.style.paddingRight=0
                this.isMore_right3=false
            }
        }
        this.ButtonArrHide3=this.ButtonArr.slice(index3)
        if(this.ButtonArrHide3.length==0){
            btnDom3.style.paddingRight=0
            this.isMore_right3=false
        }
    },
    getElementWidth(element) {
        const style = getComputedStyle(element);
        const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
        const border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
        const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
        return element.clientWidth + padding + border + margin;
    },
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.SeekBar{
    cursor: col-resize;
}
.headerBox {
    height: 38px;
    transition: max-height 0.5s ease-out;
    margin-bottom: 15px;
    box-shadow: 0px 0px 2px#ccc;
    background-color: #EBEEF3;
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .buttonGroup{
        min-width: 40px;
        display: flex;
        justify-content: flex-end;
        color: #474849;
        font-size: 14px;
        margin-right: 30px;
        cursor: pointer;
        gap: 10px;
        .shu{
            border-left: 1px solid #7D8592;
        }
        .buttonGroupItem{
            display: flex;
            align-items: center;
            .icon_style{
                margin-right: 5px;
            }
        }
    }
}
</style>